<template>
  <div>
    <el-form :inline="true" size="mini" :model="formInline" class="demo-form-inline">
      <el-form-item label="日期">
        <el-date-picker
          v-model="formInline.rq"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-hh"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="申请单号">
        <el-input v-model="formInline.sqdh" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="住院号">
        <el-input v-model="formInline.zyh" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="shDiag = true">批量审核</el-button>
      </el-form-item>
    </el-form>
    <el-form size="mini" :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="状态">
        <el-select v-model="formInline.zt">
          <el-option label="已接收" value="已接收"></el-option>
          <el-option label="审核通过" value="审核通过"></el-option>
          <el-option label="审核不通过" value="审核不通过"></el-option>
          <el-option label="已配血" value="已配血"></el-option>
          <el-option label="已发血" value="已发血"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="病区">
        <el-select v-model="formInline.bq">
          <el-option v-for="(item,i) in bqdm" :key="i" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="输血性质">
        <el-select v-model="formInline.sxxz">
          <el-option label="治疗" value="治疗"></el-option>
          <el-option label="手术备血" value="手术备血"></el-option>
          <el-option label="急救" value="急救"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="紧急程度">
        <el-select v-model="formInline.jjcd">
          <el-option label="一般" value="一般"></el-option>
          <el-option label="紧急" value="紧急"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary">申请单审核</el-button>
      </el-form-item> -->
    </el-form>
    <el-table :data="tableData" @select="selRow" @row-dblclick="dbClickTab" style="width: 100%" :height="height">
      <el-table-column fixed type="selection" width="50"></el-table-column>
      <el-table-column fixed type="index" width="50"></el-table-column>
      <el-table-column prop="brxm" label="姓名"></el-table-column>
      <el-table-column prop="brnl" label="年龄"></el-table-column>
      <el-table-column prop="brxb" label="性别"></el-table-column>
      <el-table-column prop="dw" label="单位"></el-table-column>
      <el-table-column prop="jjcd" label="紧急程度"></el-table-column>
      <el-table-column prop="sxxz" label="输血性质"></el-table-column>
      <el-table-column prop="sxmd" label="输血目的"></el-table-column>
      <el-table-column prop="sqaboxx" label="血型"></el-table-column>
      <el-table-column prop="sqrhxx" label="RH血型"></el-table-column>
      <el-table-column prop="sqdzt" label="状态"></el-table-column>
    </el-table>

    <el-dialog title="用血申请单详细信息" :visible.sync="dialogVisible" width="70%">
      <el-tabs type="border-card">
        <el-tab-pane label="申请单">
          <applicationForm></applicationForm>
        </el-tab-pane>
        <el-tab-pane label="用血前评估">
          <assessment ref="getAssessMent"></assessment>
        </el-tab-pane>
        <el-tab-pane label="检验信息"></el-tab-pane>
        <el-tab-pane label="输注护理记录">
            <infusionCare></infusionCare>
        </el-tab-pane>
        <el-tab-pane label="输血效果"></el-tab-pane>
        <el-tab-pane label="输血后补录不良反应">
          <adverseReactions></adverseReactions>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="getData">保存</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="审核" :visible.sync="shDiag" width="20%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="审核状态">
          <el-select v-model="form.zt" >
            <el-option label="审核通过" value="审核通过"></el-option>
            <el-option label="审核不通过" value="审核不通过"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="saveSH">保存</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
const infusionCare = () => import("@/components/bloodApplicationFormExamine/infusionCare")
const assessment = () => import("@/components/bloodApplicationFormExamine/assessment")
const applicationForm = () => import("@/components/bloodApplicationFormExamine/applicationForm")
const adverseReactions = () => import("@/components/bloodApplicationFormExamine/adverseReactions")
export default {
  data() {
    return {
      formInline: {
        rq: [],
        bq: "",
        jjcd: "",
        jsrq: "",
        ksrq: "",
        sqdh: "",
        sxxz: "",
        zt: "",
        zyh: "",
      },
      tableData: [],
      height: window.innerHeight - 60 - 56 - 20 - 75,
      dialogVisible: false,
      bqdm:[],
      shDiag:false,
      form:{
        zt:''
      },
      selRows:''
    };
  },
  methods: {
    dbClickTab(row, column, event) {
      this.dialogVisible = true;
      console.log(row);
    },
    getData(){
      console.log(this.$refs.getAssessMent.getData());
    },
    search(){
      this.formInline.ksrq = this.formInline.rq[0]
      this.formInline.jsrq = this.formInline.rq[1]
      this.formInline.rq = ""
      this.$ajax.get(`/yx/searchSxsqdBymany`,this.formInline).then((res) => {
        if (res.code == "0") {
         this.tableData = res.data
        } else {
          
        }
      });
    },
    selRow(row){
      row.forEach(el => {
        this.selRows = `${this.selRows},${el.sqdh}`
      })
    },
    saveSH(){
      let data ={
        sqdh:this.selRows,
        zt:this.form.zt
      }
      this.$ajax.post(`/yx/updateSxsqdzt`,data).then((res) => {
        if (res.code == "0") {
          this.$message({
              message: '操作成功',
              type: 'success'
          });
          this.search()
          this.shDiag = false
        } else {
          this.$message.error(res.msg);
          this.shDiag = false
        }
      });
    }
  },
  components:{
      infusionCare,
      assessment,
      applicationForm,
      adverseReactions
  },
  mounted(){
    this.bqdm = JSON.parse(localStorage.getItem('bqdm'))
  }
};
</script>
<style lang="less" scoped>
.el-form {
  height: 35px;
}
</style>